<template>
  <div class="hello">

    <div class="grid_area">
        <div
          v-for="list in lists"
          :key="list.id"
          class="grid_item_style">

          <div class="grid_item">
            <img src="../../../assets/logo.png" class="itemImg" alt align="center"/>
            <p>{{list.text}}</p>
         </div>

       </div>

    </div>
    

    <div class="video-title" :class="{'video-title-rotate': isRotate}">视频控件video</div>
    <video controls="controls" src="/" class="video-style">
      <source src type="video/ogg" />
      <source src type="video/mp4" />
    </video>

    <div @click="testVuex">音频控件audio</div>

    <audio
      controls="controls"
      loop="1"
      autoplay="auto"
      style="width:96%;border:2px dotted #333333 ;margin-top:2px">
      <source src="/" type="video/ogg" />
      <source src type="video/mp4" />
    </audio>
    <img src="../../../assets/logo.png" class="itemImg" alt ref="logo" :class="{'rotateImg':isRotate}"/>
    <div ref="test" :title="msg">canvas</div>
    <canvas
      id="myCanvas"
      style="width:96%;height:200px;border:1px solid #333333;"
      ref="myCanvas"
    >your browser no support the canvas element</canvas>

    <div class="input_test" v-bind:class="{'input-test':isShow}">
      <input type="checkbox" id="xigua" value="西瓜" v-model="fruits" />
      <label for="xigua">西瓜</label>
      <input type="checkbox" id="pingguo" value="苹果" v-model="fruits" />
      <label for="pingguo">苹果</label>
      <div class="check-result">水果：{{fruits}}</div>

      <input type="radio" id="gay" value="男" v-model="sex" />
      <label for="gay">男</label>
      <input type="radio" id="girl" value="女" v-model="sex" />
      <label for="girl">女</label>

      <div>性别：{{sex}}</div>

      <select v-model="answer">
        <option disabled="true" value>请选择：</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
      </select>

      <div v-show="true">答案：{{answer}}</div>
      
    </div>
  </div>
</template>

 <script>
 import { temp ,student } from '../../../bean/Beans'
 export default {
  name: "HelloWorld",
  created: function() {},
  mounted: function() {
    //获取元素 canvas 并绘制图形
    this.initCanvas();
    // var data = ['ss','dd','aa'];
    // alert('' + data.sort());
    // var data1 = [45,78,12];
    // alert('' + data1.sort());
    // alert('' + data1.sort((a,b) => {return (a-b)}));
  },
  data: function() {
    return {
      msg: "Welcome to Your Vue.js App ",
      isShow: true,
      isRotate:true,
      worker:null,
      answer: "",
      fruits: [],
      sex: "",
      lists: [
        { text: "主页1" },
        { text: "工作日志" },
        { text: "设备运行记录" },
        { text: "其他" },
         { text: "其他" },
          { text: "其他" },
      ]
    };
  },
  methods: {
    testVuex () {
      //var name = Student.name 
      alert(JSON.stringify(student));
      student.name = 'du';
      student.age = 12;
      student.birth = '1993';

      alert(JSON.stringify(student));
      //  this.$store.commit('findStr','du')
      // alert("result:"+this.$store.state.test.result);
      var jsonStr = JSON.stringify(this.$store.getters.getResult);
      //alert(jsonStr);
      var json = JSON.parse(jsonStr);
      //alert(this.$store.getters.getResult.tostr());
      var finalResult = this.$store.getters.getFinalResult('du');
      //alert(finalResult);

    },
    initCanvas() {
      console.log(this.$refs.myCanvas.style.height);
      var cxt = this.$refs.myCanvas.getContext("2d");
      //绘制矩形
      //cxt.fillStyle="#333333";
      var grd = cxt.createLinearGradient(0, 0, 175, 50);
      grd.addColorStop(0, "#FF0000");
      grd.addColorStop(1, "#00FF00");
      cxt.fillStyle = grd;
      cxt.fillRect(10, 60, 150, 70);
      //绘制三角形
      cxt.moveTo(10, 10);
      cxt.lineTo(150, 50);
      cxt.lineTo(10, 50);
      cxt.lineTo(10, 10);
      cxt.stroke();

      var img = document.createElement("img");
      img.src = "http://pic37.nipic.com/20140113/8800276_184927469000_2.png";
      img.style.width = "80px" ;
      img.style.verticalAlign = "middle" ;
      img.style.marginLeft = "20px";

      this.$refs.test.appendChild(img);
      //alert(img.src);
      //var img=new Image()
      //img.src="../assets/back.png"
      var img = this.$refs.logo;
      //alert(img);
      cxt.drawImage(img, 200, 10, 50, 50);

      //绘制圆
      cxt.fillStyle = "#FF0000";
      cxt.beginPath();
      cxt.arc(76, 16, 12, 0, Math.PI * 2, true);
      cxt.closePath();
      cxt.fill();
    },
  },
  watch:{
      
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

.hello {
  
  .grid_area{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .grid_item_style{
        flex:0 0 50%;
        .grid_item{
            padding: 10px 0 10px 0;
            border-top: 1px solid #999999;
            border-right: 1px solid #999999;
        }

    }
    .grid_item_style:nth-child(2n){
        border-right:none;
    }
    

  }


  .video-title {
    clear: left;
    background: #42b983;
  }
  .video-title-rotate {
    clear: left;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: transform 5s;
    -webkit-transition: transform 5s;
  }
  .video-style {
    width: 80%;
    height: 50%;
    border: 2px solid #333333;
    margin-top: 2px;
    padding: 20px;
  }
}
.input_test{
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}

.itemImg {
  width: 28px;
}

.input-test {
  width: 100%;
  background: #42b983;
}
@keyframes rotateAnimation
{
  0%{ transform: rotate(0deg) scale(1,1) }
  25%{ transform: rotate(90deg) scale(2,2) }
  50%{ transform: rotate(180deg) scale(3,3) }
  75%{ transform: rotate(270deg) scale(2,2) }
  100%{ transform: rotate(360deg) scale(1,1)}
}
.rotateImg {
    animation: rotateAnimation 5s linear infinite alternate;
}
</style>
